<template>
  <el-dialog class="c-f-d-dialog" :visible.sync="dialogVisible" :title="title" :modal-append-to-body="false" append-to-body destroy-on-close width="500px">
    <el-form ref="form" :model="form" label-width="50px">
      <el-form-item label="小时">
        <el-radio-group v-model="form.HDate" @input="handleHDate">
          <el-radio-button label="2"></el-radio-button>
          <el-radio-button label="4"></el-radio-button>
          <el-radio-button label="8"></el-radio-button>
          <el-radio-button label="12"></el-radio-button>
          <el-radio-button label="24"></el-radio-button>
          <el-radio-button label="-1">自定义</el-radio-button>
        </el-radio-group>
        <el-input-number :disabled="form.HDate !== '-1'" v-model="custom.HDate" @change="handleHDate" value="1" :min="1"
                         :max="999" style="width: 110px;"></el-input-number>
      </el-form-item>
      <el-form-item label="天">
        <el-radio-group v-model="form.DDate" @input="handleDDate">
          <el-radio-button label="1"></el-radio-button>
          <el-radio-button label="2"></el-radio-button>
          <el-radio-button label="3"></el-radio-button>
          <el-radio-button label="5"></el-radio-button>
          <el-radio-button label="7"></el-radio-button>
          <el-radio-button label="-1">自定义</el-radio-button>
        </el-radio-group>
        <el-input-number :disabled="form.DDate !== '-1'" v-model="custom.DDate" @change="handleDDate" value="1" :min="1"
                         :max="999" style="width: 110px;"></el-input-number>
      </el-form-item>
      <el-form-item label="周">
        <el-radio-group v-model="form.WDate" @input="handleWDate">
          <el-radio-button label="1"></el-radio-button>
          <el-radio-button label="2"></el-radio-button>
          <el-radio-button label="3"></el-radio-button>
          <el-radio-button label="5"></el-radio-button>
          <el-radio-button label="7"></el-radio-button>
          <el-radio-button label="-1">自定义</el-radio-button>
        </el-radio-group>
        <el-input-number :disabled="form.WDate !== '-1'" v-model="custom.WDate" @change="handleWDate" value="1" :min="1"
                         :max="999" style="width: 110px;"></el-input-number>
      </el-form-item>
      <el-form-item label="月">
        <el-radio-group v-model="form.MDate" @input="handleMDate">
          <el-radio-button label="1"></el-radio-button>
          <el-radio-button label="2"></el-radio-button>
          <el-radio-button label="3"></el-radio-button>
          <el-radio-button label="5"></el-radio-button>
          <el-radio-button label="7"></el-radio-button>
          <el-radio-button label="-1">自定义</el-radio-button>
        </el-radio-group>
        <el-input-number :disabled="form.MDate !== '-1'" v-model="custom.MDate" @change="handleMDate" value="1" :min="1"
                         :max="999" style="width: 110px;"></el-input-number>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "select-iso8601",
  model: {
    prop: 'value',
    event: 'setValue',
  },
  props: {
    title: {
      type: String,
      default: "ISO8610 时间选择器"
    },
  },
  data() {
    return {
      form: {
        HDate: null,
        DDate: null,
        WDate: null,
        MDate: null,
      },
      custom: {
        HDate: null,
        DDate: null,
        WDate: null,
        MDate: null,
      },
      upDate: null,
      dialogVisible: false
    }
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    submit() {
      this.$emit("setValue", this.upDate);
      this.$emit("change", this.upDate);
      this.dialogVisible = false;
    },
    handleHDate() {
      this.form.DDate = null;
      this.form.WDate = null;
      this.form.MDate = null;
      this.upDate = `PT${this.form.HDate === '-1' ? this.custom.HDate : this.form.HDate}H`;
    },
    handleDDate() {
      this.form.HDate = null;
      this.form.WDate = null;
      this.form.MDate = null;
      this.upDate = `P${this.form.DDate === '-1' ? this.custom.DDate : this.form.DDate}D`;
    },
    handleWDate() {
      this.form.HDate = null;
      this.form.DDate = null;
      this.form.MDate = null;
      this.upDate = `P${this.form.WDate === '-1' ? this.custom.WDate : this.form.WDate}W`;
    },
    handleMDate() {
      this.form.HDate = null;
      this.form.DDate = null;
      this.form.WDate = null;
      this.upDate = `P${this.form.MDate === '-1' ? this.custom.MDate : this.form.MDate}M`;
    }
  }
}
</script>

<style scoped>

.el-radio-group {
  display: inline;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;
}

</style>
